<!DOCTYPE HTML>
<html>
<head>
	
	<title>www.cssmoban.com</title>
	
	<link rel="stylesheet" href="./css/reset.css" type="text/css" />
	<link rel="stylesheet" href="./css/style.css" type="text/css" />
	<link href='http://fonts.googleapis.com/css?family=Play:400,700' rel='stylesheet' type='text/css' />
	
	<!--[if IE]>
	<script src="./js/html5.js" type="text/javascript"></script>
	<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js" type="text/javascript"></script>
	<![endif]-->
	
	<script src="./js/jquery.js"></script>
	<script src="./js/selectivizr.js"></script>
	<script src="./js/prettyphoto.js"></script>
	<script src="./js/onload.js"></script>

    
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /></head>
<body>

<div id="page">

	<!-- BEGIN TITLEBAR -->
	<header id="titlebar">

		<a href="#" id="logo"></a>

		<ul id="top_menu">
			<li>
				<a href="./index.html">Home</a>
			</li>
			<li>
				<a href="./about.htm.html">About Us</a>
			</li>
			<li>
				<a href="./blog.htm.html">Blog</a>
			</li>
			<li class="current-menu-item">
				<a href="#">Shortcodes</a>
				<ul>
					<li>
						<a href="./columns.htm.html">Columns</a>
					</li>
					<li class="current-menu-item">
						<a href="./elements.htm.html">Elements</a>
					</li>
					<li>
						<a href="./typography.htm.html">Typography</a>
					</li>
				</ul>
			</li>
			<li>
				<a href="./portfolio.htm.html">Portfolio</a>
                 <ul>
					<li>
						<a href="./portfolio.htm.html">Portfolio Image</a>
					</li>
					<li>
						<a href="./portfolio-video.htm.html">Portfolio Video</a>
					</li>
					<li>
						<a href="./portfolio-other.htm.html">Portfolio Other</a>
					</li>
				</ul>
			</li>
			<li>
				<a href="./contact.htm.html">Contact</a>
			</li>
		</ul>

		<ul id="top">
			<li>Want more?</li>
			<li>
				<a href="#" class="cloud facebook">
					<span class="arrow"></span>
				</a>
			</li>
			<li>
				<a href="#" class="cloud rss">
					<span class="arrow"></span>
				</a>
			</li>
		</ul>

	</header>
	<!-- END TITLEBAR -->


	<!-- BEGIN ARTICLE -->
	<article class="typography page_text" id="content">
	
		<header class="page_text title">
			<h1>Shortcodes - <strong>Elements</strong></h1>
		</header>


		<!-- START BUTTONS -->
		<h3 class="padding_bottom_30">Buttons</h3>

		<div class="columns">
		
			<div class="column column_16">
				<p>
					<button type="button" class="button blue arrow">Send message</button>
				</p>
			</div>
			
			<div class="column column_16">
				<p>
					<button type="button" class="button black arrow">Send message</button>
				</p>
			</div>
			
			<div class="column column_16">
				<p>
					<button type="button" class="button gray arrow">Send message</button>
				</p>
			</div>
			
			<div class="column column_16">
				<p>
					<button type="button" class="button green arrow">Send message</button>
				</p>
			</div>

			
			<div class="column column_16">
				<p>
					<button type="button" class="button magenta arrow">Send message</button>
				</p>
			</div>
		</div>

		<div class="columns padding_bottom_60">
			<div class="column column_16">
				<p>
					<button type="button" class="button blue arrow big">Send message</button>
				</p>
			</div>
			
			<div class="column column_16">
				<p>
					<button type="button" class="button black arrow big">Send message</button>
				</p>
			</div>
			
			<div class="column column_16">
				<p>
					<button type="button" class="button gray arrow big">Send message</button>
				</p>
			</div>
			
			<div class="column column_16">
				<p>
					<button type="button" class="button green arrow big">Send message</button>
				</p>
			</div>

			
			<div class="column column_16">
				<p>
					<button type="button" class="button magenta arrow big">Send message</button>
				</p>
			</div>
		</div>
		<!-- END BUTTONS -->

		
		<!-- START BUTTONS BIG -->
		<div class="columns">
			<div class="column column_16">
				<p>
					<button type="button" class="button blue">Send message</button>
				</p>
			</div>
			
			<div class="column column_16">
				<p>
					<button type="button" class="button black">Send message</button>
				</p>
			</div>
			
			<div class="column column_16">
				<p>
					<button type="button" class="button gray">Send message</button>
				</p>
			</div>
			
			<div class="column column_16">
				<p>
					<button type="button" class="button green">Send message</button>
				</p>
			</div>

			
			<div class="column column_16">
				<p>
					<button type="button" class="button magenta">Send message</button>
				</p>
			</div>
		</div>
		
		<div class="columns padding_bottom_60">
			<div class="column column_16">
				<p>
					<button type="button" class="button big blue">Send message</button>
				</p>
			</div>
			
			<div class="column column_16">
				<p>
					<button type="button" class="button big black">Send message</button>
				</p>
			</div>
			
			<div class="column column_16">
				<p>
					<button type="button" class="button big gray">Send message</button>
				</p>
			</div>
			
			<div class="column column_16">
				<p>
					<button type="button" class="button big green">Send message</button>
				</p>
			</div>

			
			<div class="column column_16">
				<p>
					<button type="button" class="button big magenta">Send message</button>
				</p>
			</div>
		</div>
		<!-- END BUTTONS BIG -->


		<div class="clear"></div>


		<!-- START LISTS -->
		<h3 class="padding_bottom_30">Lists</h3>

		<div class="columns padding_bottom_60">

			<div class="column column_16">
				<ul class="plus">
					<li>Pretium eget, nulla. Etiam accum! Tristique!</li>
					<li>Phasellus consequat.</li>
					<li>Etiam at adipiscing wisi. Donec tortor. </li>
				</ul>
			</div>
			
			<div class="column column_16">
				<ul class="minus">
					<li>Pretium eget, nulla. Etiam accum! Tristique!</li>
					<li>Phasellus consequat.</li>
					<li>Etiam at adipiscing wisi. Donec tortor. </li>
				</ul>
			</div>
			
			<div class="column column_16">
				<ul class="dot">
					<li>Pretium eget, nulla. Etiam accum! Tristique!</li>
					<li>Phasellus consequat.</li>
					<li>Etiam at adipiscing wisi. Donec tortor. </li>
				</ul>
			</div>
			
			<div class="column column_16">
				<ul class="tick">
					<li>Pretium eget, nulla. Etiam accum! Tristique!</li>
					<li>Phasellus consequat.</li>
					<li>Etiam at adipiscing wisi. Donec tortor. </li>
				</ul>
			</div>
			
			<div class="column column_16">
				<ul class="cross">
					<li>Pretium eget, nulla. Etiam accum! Tristique!</li>
					<li>Phasellus consequat.</li>
					<li>Etiam at adipiscing wisi. Donec tortor. </li>
				</ul>
			</div>
			
		</div>
		<!-- END LISTS -->


		<div class="clear"></div>
		
		
		<!-- START jQUERY TOGGLES -->
		<h3 class="padding_bottom_30">jQuery Toggles</h3>

		<div class="columns padding_bottom_60">

			<div class="column column_25">

				<section class="accordion">
                    <p class="title active">
                        <span class="icon"></span>
                        <span class="text">Toggle Title</span>
                    </p>
                    
                    <div class="content">
                        <p>Toggle content goes here. </p>
                    </div>
                </section>
                
                <section class="accordion">
                    <p class="title">
                        <span class="icon"></span>
                        <span class="text">Toggle Title</span>
                    </p>
                    
                    <div class="content">
                        <p>Toggle content goes here. </p>
                    </div>
                </section>
                
                <section class="accordion">
                    <p class="title">
                        <span class="icon"></span>
                        <span class="text">Toggle Title</span>
                    </p>
                    
                    <div class="content">
                        <p>Toggle content goes here. </p>
                    </div>
                </section>

			</div>
			
			<div class="column column_75">

				<section class="accordion">
                    <p class="title active">
                        <span class="icon"></span>
                        <span class="text">Toggle Title</span>
                    </p>
                    
                    <div class="content">
                        <p>Toggle content goes here. </p>
                    </div>
                </section>
                
                <section class="accordion">
                    <p class="title">
                        <span class="icon"></span>
                        <span class="text">Toggle Title</span>
                    </p>
                    
                    <div class="content">
                        <p>Toggle content goes here. </p>
                    </div>
                </section>
                
                <section class="accordion">
                    <p class="title">
                        <span class="icon"></span>
                        <span class="text">Toggle Title</span>
                    </p>
                    
                    <div class="content">
                        <p>Toggle content goes here. </p>
                    </div>
                </section>

			</div>
			
		</div>
		<!-- END jQUERY TOGGLES -->


	</article>
	<!-- END ARTICLE -->
	
	


</div>
<!--  END PAGE -->


<!--  START FOOTER -->
<footer id="footer">
	
	<section class="contact">
		
		<span class="mobile">
			<strong>Mobile Phone:</strong> 555 152 535
		</span>

		<span class="mail">
			<strong>E-mail:</strong> <a href="mailto:contact@experience.com">contact@experience.com</a>
		</span>
		
		<a class="top">top</a>

	</section>

	<nav>
		<ul id="footer_menu">
			<li><a href="./index.html">Home</a></li>
			<li><a href="./about.htm.html">About Us</a></li>
			<li><a href="./blog.htm.html">Blog</a></li>
			<li class="current-menu-item"><a href="./typography.htm.html">Shortcodes</a></li>
			<li><a href="./portfolio.htm.html">Portfolio</a></li>
			<li><a href="./contact.htm.html">Contact</a></li>
		</ul>
	</nav>

	<p class="copyright">
		&copy; Copyright &copy; 2013.Company name All rights reserved.<a target="_blank" href="http://www.cssmoban.com/" title="模板之家">模板之家</a> Collect from <a href="http://www.cssmoban.com/" title="网站模板" target="_blank">网站模板</a>
	</p>

</footer>
<!--  END FOOTER -->



</body>
</html>